<!DOCTYPE html>
<html>
    <head>
        <title>ComfyCanvas</title>
        <link rel="stylesheet" href="/static/styles.css">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
    </head>
    <body onwheel="changesize(event);" onmousemove="mousecoordinates(event);" onkeydown="printLetter(event);">
        <script src="/static/app.js"></script>
        <script>
            var host = '{{host}}';
            var port = '{{port}}';
        </script>
        <div id="container" onmouseenter="reset();" style="width: 100%;height: 100%;">
            <canvas id="grid"></canvas>
            <div id="aura"></div>
            <div id="canvascontainer">
                <img id="sourceimg" src="{{byte_im}}" width={{w}} height={{h}} style="visibility: hidden;" style="position: fixed;"/>
                <canvas id="source" width={{w}} height={{h}} onclick="drawenable();" onmousemove="draw();" ></canvas>
            </div>    
            <div id="compare">
                <img id="oldimg" width="512" height="512" src="">
            </div>        
            <div id="moveimglistner" style="position: absolute; width: 100%;height: 100%;top: 0%;left: 0%; z-index: 3;"  onclick="moveimg(); " onmousemove="grabselector();"></div>
            <div id="selector" onmousemove="selector();" onclick="snapshot();"></div>
            <div id="hint">
                <p id="hinttext"></p><input id="hintinp" type="text" onchange="changeselectorsize(event);"><p>px</p>
            </div>
            <div id="textinput">
                <input id="textinp" type="text" placeholder="Enter Text" size="10">
            </div>
            <div id="gligencont">
                <div id="gligenconfirm" onclick="confirmGligen();"><p class="txt">Confirm</p></div>
                <textarea rows="4" cols="40" id="gligenmain" type="text" placeholder="Enter Main Prompt" size="10"></textarea>
            </div>
            <div id="settings">
                <div id="settingsbarbtns">
                    <div id="setref" class="btn" onclick="setreftoggle();"><p class="txt">Set Ref.</p></div>
                    <div id="resetref" class="btn" onclick="resetref();"><p class="txt">Reset Ref.</p></div>
                    <div id="crop" class="btn" onclick="cropimg();"><p class="txt">Crop</p></div>
                    <div id="compbtn" class="btn" onclick="compare();"><p class="txt">Compare</p></div>
                    <div id="moveimg" class="btn" onclick="moveimgenablefirst();"><p class="txt">Move</p></div>
                    <div id="eraseon" class="btn" onclick="erasemodeon()"><p class="txt">Erase</p></div>
                    <div id="maskon" class="btn" onclick="maskmodeon()"><p class="txt">Mask</p></div>
                    <div id="drawon" class="btn" onclick="drawmodeon()"><p class="txt">Draw</p></div>
                    <div id="fit" class="btn" onclick="fit();"><p class="txt">Fit</p></div>
                    <div id="uploadnew" class="btn" onclick="uploadnewimage();"><p class="txt">New</p></div>
                    <div id="addtext" class="btn" onclick="addText();"><p class="txt">Text</p></div>
                    <div id="gligen" class="btn" onclick="setGligen();"><p class="txt">GLIGEN</p></div>
                    <div id="empty" class="btn" onclick="emptyCanvas();"><p class="txt">Blank</p></div>
                    <div id="gridbtn" class="btn" onclick="gridDraw();"><p class="txt">Grid</p></div>
                    <div id="lone" class="btn" onclick="setLone();"><p class="txt">COMFY</p></div>
                    <div id="undo" class="btn" onclick="undoimg();"><p class="txt">Undo</p></div>
                </div>
                <div id="settingsbarparams">
                    <div id="workflowsettings">
                        <div class="dropdown" id="wfsdropdown">
                            <button class="dropbtn" id="wfbutton">Select Workflow</button>
                            <div class="dropdown-content" id="wfscont">
                            </div>
                        </div>
                        <div class="dropdown" id="modelsdropdown">
                            <button class="dropbtn" id="modelbutton">Select Model</button>
                            <div class="dropdown-content" id="modelscont">
                            </div>
                        </div>
                        <button class="dropbtn" id="paramsbutton" onclick="showStack();">Change Parameter</button>
                        <div id="maskreset" class="btn txt" onclick="maskreset();">Reset Mask</div>
                        <div id="paramvalue" class="btn txt" onclick="paramset();">Reset Parameters</div>
                    </div>
                    <div id="generalsettings">
                        <p id="label">Box Size: </p>
                        <input type="text" id="selectorsize" onchange="changeselectorsize(event);" size="4">
                        <p id="label2">Fade Factor: </p>
                        <input id="ff" type="text" size="4"  onchange="ffupdate();">
                        <p id="label3">Eraser/Pencil Size: </p>
                        <input id="erasersize" type="text" size="4">
                        <input id="clr" type="color" size="3">
                        <input id="inprange" type="range" min="0" max="255" step="1">
                        <input id="gridrange" type="range" min="64" max="512" value="128" step="64" onchange="setGridSize(event);">
                    </div>
                    <div id="moresettings">
                        <p id="label4">Image Width: </p>
                        <input type="text" id="imgwidth" onchange="setImageWidth(event);" size="4">
                        <p id="label5">Image Height: </p>
                        <input id="imgheight" type="text" size="4"  onchange="setImageHeight(event);">
                        <p id="label6">Image Opacity: </p>
                        <input type="text" id="imgopacity" onchange="setImageOpacity(event);" size="4">
                        <div id="routinerecord" class="btn" onclick="recordRoutine();"><p class="txt">Rec. Routine</p></div>
                        <div id="routinestart" class="btn" onclick="getRoutine();"><p class="txt">Start Routine</p></div>
                        <div class="dropdown" id="routinesdropdown">
                            <button class="dropbtn" id="routinebutton">Select Routine</button>
                            <div class="dropdown-content" id="routinecont">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="settingsbarthird">
                    <div id="locksetts">
                        <div id="lockleft" class="btn" onclick="lockleft();"><p class="txt">Left</p></div>
                        <div id="lockright" class="btn" onclick="lockright();"><p class="txt">Right</p></div>
                        <div id="lockbottom" class="btn" onclick="lockbottom();"><p class="txt">Bottom</p></div>
                        <div id="locktop" class="btn" onclick="locktop();"><p class="txt">Top</p></div>
                    </div>
                    <div id="lockfull">
                        <div id="lockbox" class="btn" onclick="lockbox();"><p class="txt">Lock To Image</p></div>
                    </div>
                    <div id="othersetts">
                        <div id="resetimg" class="btn" onclick="resetimg();"><p class="txt">Reset Image</p></div>
                        <div id="saveimg" class="btn" onclick="saveimg()"><p class="txt">Save Image</p></div>
                        <div id="saveexit" class="btn" onclick="savejson()"><p class="txt">Generate</p></div>                        
                    </div>
                </div>
                <label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
                <input id="openimgadd" type="file">
            </div>
            <div id="settings2">
                <div id="moveimg1"  onclick="moveimgenable();"><p class="txt">Move Image</p></div>
                <div id="done" onclick="compimage();"><p class="txt">Done</p></div>
                <label for="openimgadd2" id="uploadanotherimg"><p class="icontxt">+</p></label>
            </div>
            <div id="uploadcontainer">
                <label for="openimg" class="uploadstyle">
                    <p>Upload Image</p>
                </label>
                <input id="openimg" type="file">
            </div>
                
                
        </div>
        <div id="drawer" onclick="expandDrawer();">
            <img id="img5" width="150" height="150" onclick="openDrawerImage(event);">
            <img id="img4" width="150" height="150" onclick="openDrawerImage(event);">
            <img id="img3" width="150" height="150" onclick="openDrawerImage(event);">
            <img id="img2" width="150" height="150" onclick="openDrawerImage(event);">
            <img id="img1" width="150" height="150" onclick="openDrawerImage(event);">
        </div>
        <div id="stack"></div>
        <div id="blockactions"></div>
        <div id="cancel" onclick="cancelgen();">+</div>
    </body>
</html>
